<html>
   <head>
      <script src="../../../Grid/GridE.js"> </script>
      <title>TreeGrid SpreadSheet online by JavaScript component | TreeGrid</title>
      <meta name="description" content="Add full featured and customizable spreadsheet to your web pages to let your user to view, create, edit and save their data in grid" />
   </head>
   <body class="Example">
      <style>
         /* Examples shared styles */
         .Example h1,.Example h2,.Example ul,.Example .Desc,.Example .Path,.Example .Xml { max-height:999999px; }
         .Example h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
         .Example h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
         .Example h3,.Example h4 { display:inline-block; font:bold 15px/17px Arial; padding:0px 5px 0px 5px; border-radius:2px; margin:2px; color:#333; }
         .Example h3 { background:#EE9; border:1px solid #DD8; }
         .Example h4 { background:#BDE; border:1px solid #ACD; }
         .Example a { text-decoration:underline; }      
         .Example li { padding-bottom:8px; }
         .Example ul { margin:6px 0px 0px 0px; font:13px/16px Arial; }    
         .Example > ul { margin-left:0px; padding-left:15px; clear:both; }
         .Example ul b { color:#0585B9; }
         .Example .Desc { margin:0px 5px 10px 5px; padding:10px; border:1px solid #dfdfdf; font:14px/17px Arial; }
         .Example .Desc b { color:#0585B9; }
         .Example .Path { font:normal 12px Arial; color:#0585B9; }
         .Example .Path b { color:#D73938; }
         .Example .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
         .Example .Path i { color:black; font-style:normal; font-weight:bold; }
         .Example .Xml { margin-bottom:6px; font:11px/14px Arial; color:#757575; }
         .Example .Border { margin:0px 5px 15px 5px; }
         .Example .Main { height:700px; }
         @media (max-height:800px) { 
            .Example .Desc { font-size:13px; line-height:15px; margin:0px 5px 5px 5px; padding:3px 5px; } 
            .Example .Desc br { display:none; }
            .Example .Border { margin-bottom:0px; }
            .Example h1 { font:20px Arial; padding:0px; }
            .Example h2 { display:none; }
            .Example .Desc select { font-size:10px; line-height:10px; }
            }
      </style>
      <script>

// --- Custom actions to hide / show fixed rows ---
Grids.ShowHeader = function(G,focused,test){ return ChangeRow(G,G.Header,1,test); }
Grids.HideHeader = function(G,focused,test){ return ChangeRow(G,G.Header,0,test); }
Grids.ShowPanelRow = function(G,focused,test){ return ChangeRow(G,G.Rows.Panel,1,test); }
Grids.HidePanelRow = function(G,focused,test){ return ChangeRow(G,G.Rows.Panel,0,test); }
Grids.ShowNames = function(G,focused,test){ return ChangeRow(G,G.Rows.ID,1,test); }
Grids.HideNames = function(G,focused,test){ return ChangeRow(G,G.Rows.ID,0,test); }
Grids.ShowToolbar = function(G,focused,test){ for(var i=1,chg=0;i<10;i++) chg += ChangeRow(G,G.Rows["Toolbar"+i],1,test); return chg; }
Grids.HideToolbar = function(G,focused,test){ for(var i=1,chg=0;i<10;i++) chg += ChangeRow(G,G.Rows["Toolbar"+i],0,test); return chg; }
function ChangeRow(G,row,show,test){
if(!row.Visible==!show||row.CanHide==0) return false;
if(test) return true;
if(show) G.ShowRow(row);
else G.HideRow(row);
return true;
}

// --- Custom actions to hide / show fixed columns ---
Grids.ShowIndex = function(G,focused,test){ return ChangeCol(G,"Index",1,test); }
Grids.HideIndex = function(G,focused,test){ return ChangeCol(G,"Index",0,test); }
Grids.ShowPanel = function(G,focused,test){ return ChangeCol(G,"Panel",1,test); }
Grids.HidePanel = function(G,focused,test){ return ChangeCol(G,"Panel",0,test); }
Grids.ShowIds = function(G,focused,test){ return ChangeCol(G,"id",1,test); }
Grids.HideIds = function(G,focused,test){ return ChangeCol(G,"id",0,test); }
function ChangeCol(G,col,show,test){
if(!G.Cols[col].Visible==!show) return false;
if(test) return true;
if(show) G.ShowCol(col);
else G.HideCol(col);
return true;
}

// --- Called when NoVScroll / NoHScroll is set automatically due small window size or manually by click to toolbar WinScroll button ---
Grids.OnLimitScroll = function(G,clr,noh,nov){ setTimeout( function(){ ChangeLayout(G,!clr); },10); } // Calls it in timeout, because it changes grid layout and the handler is called during layout update
Grids.OnChangeWinScroll = function(G,clr){ setTimeout( function(){ ChangeLayout(G,!clr); },10); }     // Calls it in timeout, because it changes grid layout and the handler is called during layout update

// --- Changes page and grid layout if changed scrolling window (win = true) / grid (win = false) ---
function ChangeLayout(G,win){
document.body.style.margin = win ? "" : "0px";
GetElem('Border').style.margin = win?'0px':''; 
GetElem('Desc').style.display = win?'none':''; 
if(win){ G.HideRow(G.Rows.ID); G.HideCol('id'); } 
else { G.ShowRow(G.Rows.ID); G.ShowCol('id'); }
}

      </script>

      <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Examples\/|\/ExamplesGantt\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
      <h1>SpreadSheet</h1>
      <h2>A demonstration of cell based spreadsheet program</h2>
      <div class="Desc">
         <i>Demonstrates features in <b>SpreadSheet</b> TreeGrid module.</i><br />
         <b>Features:</b> Editable formulas with suggest menu and choosing cell range during editing; Row and column index; Auto adding new rows and columns on scroll;
         Dynamic cell border; Dynamic cell style; Dynamic and automatic cell format and type; Mass changes like Clear, Move, Copy, Paste, AutoFill with all cell attributes.
      </div>
      <center id="Border" class="Border">
         <div class="Main">
            <bdo Layout_Url="SheetDef.js" Data_Url="SheetData.js"
               Upload_Tag="Debug" Upload_Type="Cells,EditAttrs,Index,NoEmpty"
            ></bdo>
         </div>
      </center>
      <div class="Desc" id="Desc">
      <ul>
         <li>
            <h4>Index</h4><br />
            The rows and columns are in formulas addressed by their index instead of row id or column name.<br />
            The column index is shown in top header, the column index here consists from letters A-Z. The row index is shown in left column, the row index here is a number from 1.<br />
            To compare, the column name is shown in bottom row and row id in right column - <i>the id and name is <b>not</b> changed when the row or column moved, added or deleted, but the indexes are always updated</i>.<br />
         </li>
         <li><h4>Auto pages</h4><br />
            New rows and column are automatically added to sheet end when you scroll bottom or right end. Empty pages are automatically removed after some time if they are not visible and focused.<br />
         </li>
         <li><h4>Dynamic cell border</h4><br />
            Every cell can have set its border on one or more its edges. The border between adjacent cells is shared. If more cells define the same border edge, the right and bottom cell is preferred.<br />
            There are 8 predefined border width and styles in TreeGrid: 0px, 1px solid, 2px solid, 3px solid, 1px dotted, 2px dotted, 1px dashed, 2px dashed. Every border style can have any color.<br />
            Set it on Toolbar Border button or from popup menu.
         </li>
         <li><h4>Dynamic cell style</h4><br />
            Every cell can have set various text styles as: bold font, italic font, underline, strike, overline, small caps. Font name and size. 
            Text color, text shadow and cell background color.
            Horizontal and vertical alignment, rotate and wrapping.
            Set it on appropriate Toolbar button or from popup menu.
         </li>
         <li><h4>Dynamic cell span</h4><br />
            Every cells can be spanned together horizontally or vertically. The row and column span just cannot cross. Set it on Toolbar Span/Split button or from popup menu.
         </li>
         <li><h4>Mass cell change</h4><br />
            Selected cell ranges can be modified together and all their values, formulas and attributes like border, style and span are affected too.<br />
            The mass changes are: <b>Clear</b> cells by Del key, <b>move</b> cells by mouse dragging the focused edge, <b>copy</b> cells by mouse dragging the focused edge with ctrl,
            <b>auto fill</b> cells by mouse dragging the bottom right corner of focused range, <b>copy &amp; paste</b> by Ctrl+C, Ctrl+X and Ctrl+V.<br />
         </li>
         <li><h4>Columns and rows changes</h4><br />
            The rows and columns can be <b>selected</b> by clicking or dragging their Panel Select button.<br /> 
            The individual or selected groups of rows and columns can:
            <b>move</b> by dragging their Index, <b>copy</b> by dragging their Index with Ctrl, <b>delete</b>, <b>hide</b>, <b>show</b> on click to panel Delete button, <b>add</b> or copy on click to Panel Copy button.
         </li>
         <li><h4>Popup menu</h4><br />
            All cell, row and column actions are available also from popup menu shown or right click.<br />
         </li>
         <li>
            <h4>Editable formulas</h4> <br />
               In every cell you can enter its formula starting by '<h4>=</h4>'. Cell value will show the formula result. <br />
            <ul>
            <li><h4>Cell references</h4><br />
               Every formula can use value from another cell or cell range. The cell(s) can be addressed relatively (e.g. "A1") or absolutely by $ (e.g. "$A$1").<br />
                  <ul>
                  <li>
                     The row and columns <b>change</b> their <b>index</b> whenever they or previous items are moved, deleted or added.<br />
                     All formulas (both absolute and relative) are updated accordingly after any Index change to refer still the same original rows and columns.<br />
                  </li>
                  <li>
                     If <b>relative</b> formula is <b>copied</b>, it changes for the difference between indexes in old and new location.
                     So the relative formula (without $) refers the new destination location. <br />
                     If <b>absolute</b> formula is <b>copied</b>, it never changes.
                     So the absolute formula (with $) refers the original location.<br />
                  </li>
                   <li>
                     If formula is <b>moved</b> (both absolute and relative), it changes for the difference between indexes in old and new location. <br />
                     But it does <u>not</u> change if all the source (referred) cells were moved too.
                   </li>
                   <li>
                     If formula references <b>range</b>(s), only the range bounds are absolutely defined and the range always contains rows and columns actually placed between the range bounds.<br />
                   </li>
                  </ul>
               The cell reference can be also pick up by mouse click or dragging during formula editing.<br />
               </li>
               <li><h4>Operators</h4><br />
                  Default operators use standard C++/JavaScript syntax: <b>+</b>, <b>-</b>, <b>*</b>, <b>/</b>, <b>!</b> (not), <b>%</b> (modulo), <b>&</b> (bit AND), <b>|</b> (bit OR), <b>^</b> (bit XOR), <b>&&</b> (logical and), <b>||</b> (logical OR), <b><<</b>, <b>>></b> (bit shift), <b>==</b> (equals), <b>!=</b> (not equals), <b><=</b> (less or equal), <b>>=</b> (greater or equal), <b><</b> (less), <b>></b> (greater).<br />
                  There are added more operators: <b>=</b> (equals), <b>&lt;></b> (not equals), <b>?:</b> (condition three arguments as "condition?result_true:result_false").<br />
                  Priority of operators is the same as in JavaScript and cannot be changed. Always you can use <b>( )</b>.<br />
                  There are defined constants: <b>pi</b> (3.14), <b>ln2</b> (ln(2)), <b>ln10</b> (ln(10)), <b>log2e</b> (log2(e)), <b>log10e</b> (log10(e)), <b>sqrt2</b> (sqrt(2)), <b>sqrt1_2</b> (1/sqrt(2)).<br />
               </li>
               <li><h4>Functions</h4><br />
                  There can be used also these aggregate functions: <h3>sum</h3>, <h3>sumsq</h3>, <h3>count</h3>, <h3>counta</h3>, <h3>countblank</h3>, <h3>max</h3>, <h3>min</h3>, <h3>product</h3>. <br />
                  The functions accept as parameters value constants (e.g. 100), single cell reference (e.g. A1) or cell range reference (e.g. A1:B4).
                  In the range the bounds are separated by colon '<h4>:</h4>'.
                  The functions accept more parameters separated by comma <h4>,</h4>.<br />
                  There are also defined standard JavaScript mathematical functions: <b>abs</b>(x), <b>round</b>(x), <b>ceil</b>(x), <b>floor</b>(x), <b>exp</b>(x), <b>log</b>(x), <b>pow</b>(x,y), <b>sqrt</b>(x), <b>sin</b>(x), <b>cos</b>(x), <b>tan</b>(x), <b>asin</b>(x), <b>acos</b>(x), <b>atan</b>(x,y).<br />
                  There are also defined date functions: <b>date</b>(year,month,day,hour,minute,second), <b>date</b>(date,format), <b>time</b>(hour,minute,second), <b>time</b> (time,format), <b>now</b>(), <b>today</b>(), <b>year</b>(date), <b>month</b>(date), <b>day</b>(date), <b>weekday</b>(date),<b>weeknum</b>(date), <b>hour</b>(date), <b>minute</b>(date), <b>second</b>(date).<br />
                  And one formatting function: <b>text</b>(value,format,type) to convert date or number to string.<br />
                  Available functions are suggested during editing after first characters are typed.<br />
               </li>
            </ul>

         </li>

      </ul>
   </div>

      <!-- Google Analytics code run once for trial -->
      <script>
         var TGTrial = document.cookie.match(/TGTrialGrid\s*=\s*(\d+)/), TGIndex = 512;
         if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
            var n = "RunTrialHtmlSheet", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialGrid="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
            var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
            var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
                 +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
            var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
            },100);
     </script>
   </body>
</html>
